<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<link rel="stylesheet" href="./index.css">
<link rel="stylesheet" href="https://at.alicdn.com/t/c/font_3609951_ua099rz0rln.css">
<style>
    * {
        margin: 0;
        padding: 0;
    }

    .h-top {
        width: 100%;
        /* background-color: skyblue; */
        display: flex;

    }

    .h-i1 {
        width: 2rem;
        height: 2rem;
        padding: .7rem;

    }

    .h-i1 img {
        width: 100%;
        border-radius: 50%;
    }

    .h-name {
        /* background-color: pink; */
        width: 10rem;
        display: flex;
        justify-content: space-between;
        padding-left: .3rem;

    }

    .h-ln {
        margin-top: .5rem;
    }

    .h-rn {
        line-height: 2.2rem;
    }

    .h-lnp {
        padding: .1rem;
        color: white;
        background-color: #c6709a;
        font-size: .25rem;
        border-radius: .1.5rem;


    }

    .h-t1 {
        display: flex;

    }

    .h-cl1 {
        width: 50%;
        height: 5rem;
        box-shadow: .1rem 0 .1rem 0 rgba(0, 0, 0, 0.1);
        text-align: center;
        padding-top: .5rem;
        box-sizing: border-box;
        font-size: .4rem;
    }

    .h-cl1 img {
        margin-top: 1rem;
        width: 1rem;
    }



    .h-bt {
        margin-top: .4rem;
    }

    .h-ik {
        padding-left: 0.6rem;
        height: 1.5rem;
        margin-top: .4rem;
        display: flex;
        justify-content: space-between;
        line-height: 1.5rem;
        box-shadow: .1rem .1rem .1rem .1rem rgba(0, 0, 0, 0.1);
        font-size: .3rem;
    }

    .h-ik img {
        width: 0.75rem;
        vertical-align: middle;
    }

    .l-box {
        width: 12rem;
        height: 26rem;
        background-color: rgba(234, 230, 230, 0.8);
        position: relative;
    }

    .l-box1 {
        width: 12rem;
        height: 2rem;
        text-align: center;
        font-size: 0.5rem;
        font-weight: 600;
        line-height: 2rem;

        background-color: #ffff;
    }

    .l-tb {
        position: absolute;
        top: 0;
        left: 0.6rem;
        font-size: 0.7rem;

    }

    .l-box2 {
        height: 13rem;
        /* background-color: plum; */
        display: flex;
        flex-wrap: wrap;
        align-content: space-around;
        justify-content: space-evenly;
    }

    .l-box3 {
        /* margin-top: 20px; */
        width: 5.5rem;
        height: 4rem;
        /* background-color: plum; */
        font-size: 0.6rem;
        border-radius: 0.523rem;
        position: relative;
        background-color: #ffff;

    }

    .l-ll {
        font-size: 0.7rem;
        font-weight: 550;

    }

    .l-xx {
        font-size: 0.5rem;
        font-weight: 550;

    }

    .l-jj {
        margin-left: 0.24rem;
        font-size: 0.5rem;
        /* font-weight: 550; */

    }

    .l-gg {
        margin-left: 8px;
        font-size: 0.5rem;
        color: red;
        border: 1px solid red;
        border-radius: 1.8461538462rem;
        /* padding: 2px; */

    }

    .l-ss {
        padding-top: 0.3rem;
    }

    .l-tt {
        font-size: 0.7rem;

        margin-top: 0.615rem;
        border-top: 1px solid #c2bebf;
        font-weight: 550;
        color: #3b38dc;
        text-align: center;
        /* height: 0.76rem; */
        line-height: 1.3rem;
    }

    .l-aa {
        /* margin-left: 15px; */
        display: flex;
        align-items: center;
        justify-content: space-evenly;
    }

    .l-cc {
        margin-top: 0.92rem;
        font-size: 0.48rem;
        text-align: center;
    }

    .l-ss {
        font-size: 0.38rem;
        margin-left: 0.3rem;
    }

    .l-fu {
        position: absolute;
        top: 0.3rem;
        right: 0;
    }

    .l-fu img {
        width: 0.8615384615rem;
        border-top-left-radius: 0.6153846154rem;
        border-bottom-left-radius: 0.6153846154rem;

    }

    .g-box {
        position: relative;
    }

    .g-box1 {
        width: 12rem;
        height: 1.5rem;
        text-align: center;
        font-size: 0.5rem;
        font-weight: 800;
        line-height: 1.5rem;
        background-color: white;
    }

    .g-box2 {
        background: rgb(45, 40, 224);
        background: linear-gradient(90deg, rgba(45, 40, 224, 1) 1%, rgba(133, 22, 186, 1) 93%);
        width: 12rem;
        height: 5.4rem;
    }

    .g-box3 {
        width: 11rem;
        height: 5.4rem;
        background-color: white;
        margin: 0 auto;
        position: absolute;
        border-radius: 0.3rem;
        top: 2.4rem;
        left: 0.45rem;
        box-shadow: 0.15rem 0.18rem 0.15rem #a2a19f;
    }

    .g-box4 {
        width: 9rem;
        height: 3.5rem;

        position: absolute;
        top: 0.69rem;
        left: 1.02rem;
    }

    .g-box5 {
        height: 0.9rem;

        text-align: center;
        font-size: 0.48rem;
        font-weight: 600;
        line-height: 0.9rem;
    }

    .g-box6 {
        margin: 0 auto;
        width: 3.9rem;

        display: flex;
    }

    .g-box7 img {
        width: 1.5rem;
        height: 1.5rem;
        border-radius: 50%;
    }

    .g-box8 {
        margin: 0 0.3rem 0 0.3rem;
        font-weight: 800;
        font-size: 1.2rem;
    }

    .g-box9 {
        height: 0.9rem;

        text-align: center;
        font-size: 0.39rem;
        color: #ccc;
        line-height: 0.9rem;

    }

    .g-box10 {

        padding-top: 1.5rem;
        font-size: 0.48rem;
        font-weight: 500;
        border-top: 0.03rem solid #c2bebf;


    }

    .g-box11 {
        padding-left: 0.6rem;
        padding-right: 0.6rem;
        line-height: 1.5rem;
        border-bottom: 0.03rem solid #c2bebf;
        height: 1.5rem;
        display: flex;
        justify-content: space-between
    }
</style>

<body>
    <div id="app">

        <router-view></router-view>
    </div>
</body>
<script src="./常用/vue.js"></script>
<script src="./常用/router.js"></script>
<script src="./常用/shipei.js"></script>
<script src="./index.js"></script>
<template id="huan">
    <div>
        <div class="h-top">
            <div class="h-i1">
                <img :src="hi1" alt="">
            </div>
            <div class="h-name">
                <div class="h-ln">
                    <p class="h-lni">{{hln1}}</p>
                    <P class="h-lnp">{{hln2}}</P>

                </div>
                <div class="h-rn"> > </div>

            </div>
        </div>
        <div class="h-cl">
            <span class="h-lnp ">{{hln3}}</span>
            <div class="h-t1">
                <div class="h-cl1" v-for="item,index in hcl1">
                    <img :src="item.i" alt="" @click="hf(index)">
                    <p>{{item.n}}</p>
                </div>
            </div>



        </div>
        <div class="h-bt">
            <div class="h-ik" v-for="item in harr">
                <div>
                    <img :src="item.i" alt="">
                    <span>{{item.n}}</span>
                </div>
                <div> > </div>
            </div>
        </div>
    </div>
</template>
<template id="jie">
    <div>
        <div class="l-box">
            <div class="l-box1">
                <div>Store</div>
                <div class="l-tb iconfont icon-xiangzuo11" @click="jf"></div>
            </div>
            <div class="l-box2">
                <div class="l-box3" v-for="item,index in arr">
                    <div class="l-ss ">
                        <span class="l-ll">{{item.aa}} </span><span class="l-xx">COINS</span>
                    </div>
                    <div class="l-aa">
                        <span>{{item.bb}} </span><span class="l-jj">BONUS</span><span class="l-gg">{{item.cc}}
                        </span>
                    </div>
                    <div class="l-tt">
                        USD $ {{item.dd}}
                    </div>
                    <div class="l-fu" v-if="index==1||index==5">

                    </div>
                </div>
            </div>

            <div class="l-cc">

                <div class="l-cc">Need help? Please visit our <b>Q&A</b> or Feedback</div>
                <div>
                    <p class="l-ss">To safeguud your digtal assets on Dreame, we reconsmend </p>
                    <p class="l-ss"> peedhasng cors when loaged in with your FB or Goage account</p>
                </div>

            </div>
        </div>
    </div>
</template>
<template id="ting">
    <div>
        <div class="g-box">
            <div class="g-box1">
                Wallet
            </div>
            <div class="g-box2">

            </div>
            <div class="g-box3">
                <div class="g-box4">
                    <div class="g-box5">COINS</div>
                    <div class="g-box6">
                        <div class="g-box7">
                            <img src="./tu1.jpg" alt="">
                        </div>
                        <div class="g-box8">58</div>

                    </div>
                    <div class="g-box9">-Coins Purch O | Bonus 58-</div>
                </div>

            </div>
            <div class="g-box10">
                <div class="g-box11" v-for="item,index in arr">
                    <span>{{item.gst}}</span>
                    <span v-if="index!=4">></span>
                    <div class="g-box12" v-if="index==4">
                        <el-switch v-model="gst1">
                        </el-switch>
                    </div>
                </div>


            </div>
        </div>
    </div>
</template>
<script>



    let huan = {
        template: "#huan",
        data() {
            return {
                hi1: './img/Snipaste_2023-03-08_20-24-56.png',
                hln1: "VISTOR",
                hln2: "VISTORVISTOR",
                hln3: "Up to 20%",
                hcl1: [
                    { n: 'Top UP', i: './img/店铺.png' },
                    { n: 'WALLET', i: './img/钱包.png' },],
                harr: [
                    { n: 'To be a Ureame Writer!', i: "./img/皇冠.png" },
                    { n: 'Earn Rewards', i: "./img/收件箱.png" },
                    { n: 'Redemption Code', i: "./img/优惠卷.png" },
                    { n: 'My Coupons', i: "./img/门票2.png" },
                    { n: 'viewed', i: "./img/时间.png" },
                    { n: 'following', i: "./img/地址.png" },
                ]
            }
        },
        methods: {
            hf(a) {
                if (a == 0) {
                    window.location.href = "#/jie"
                } else {
                    window.location.href = "#/ting"
                }
            },

        },

    }

    let jie = {
        template: "#jie",
        data() {
            return {
                arr: [
                    { aa: '600', bb: '+30', cc: '+5%', dd: '5.99' },
                    { aa: '1000', bb: '+300', cc: '+30%', dd: '9.99' },
                    { aa: '1500', bb: '+525', cc: '+35%', dd: '14.99' },
                    { aa: '2500', bb: '+1250', cc: '+50%', dd: '24.99' },
                    { aa: '4000', bb: '+2400', cc: '+60%', dd: '39.99' },
                    { aa: '5000', bb: '+3500', cc: '+70%', dd: '49.99' },
                ]
            }
        },
        methods: {
            jf() {
                console.log(1111);
                window.location.href = "#/"
            }
        },
    }
    let ting = {
        template: "#ting",
        data() {
            return {
                arr: [
                    { gst: 'Transaction History' },
                    { gst: 'Bonus Received' },
                    { gst: 'Episodes Unlocked' },
                    { gst: 'Reward record' },
                    { gst: 'Turn on auto-unlock' },
                ],
                gst1: true,
            }
        },
    }


    let routes = [
        { path: '/', component: huan },
        { path: '/jie', component: jie },
        { path: '/ting', component: ting },
    ]

    const router = new VueRouter({
        routes,
    })

    new Vue({
        el: "#app",
        data: {

        },
        router,
    })
</script>




</html>